<template>
	<view class="statistics">
		<custom-header title="数据统计" />
		<view class="_wrap">
			<view class="bg">
				<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_bg.png" mode="widthFix"></image>
			</view>
			<view class="title_time">
				<view class="title">统计</view>
				<view 
					class="time" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="isShowDatetimePicker = true">
					<view class="text"> {{ selectDateTime || "选择时间" }} </view>
					<view class="icon">
						<image src="/static/common/bottom2.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="list_wrap">
				<view class="list">
					<view class="left">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_01.png" mode=""></image>
						</view>
						<view class="name_value">
							<view class="name">成交金额</view>
							<view class="value">{{reportOverview.actSoldAmount || 0}}元</view>
						</view>
					</view>
					<view class="right"></view>
				</view>
				<view class="list">
					<view class="left">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_02.png" mode=""></image>
						</view>
						<view class="name_value">
							<view class="name">成交数量</view>
							<view class="value">{{reportOverview.actSoldQuantity || 0}}扎</view>
						</view>
					</view>
					<view class="right"></view>
				</view>
				<view class="list">
					<view class="left">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_03.png" mode=""></image>
						</view>
						<view class="name_value">
							<view class="name">迟到</view>
							<view class="value">{{reportOverview.noEnterNum || 0}}次/扎</view>
						</view>
					</view>
					<view class="right"></view>
				</view>
				<view 
					class="list" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleGoStockoutRecord">
					<view class="left">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_04.png" mode=""></image>
						</view>
						<view class="name_value">
							<view class="name">缺货</view>
							<view class="value">{{reportOverview.lackQuantity || 0}}扎</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/common/right1.png" mode=""></image>
					</view>
				</view>
				<view 
					class="list" 
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleGoDemotionRecord">
					<view class="left">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_05.png" mode=""></image>
						</view>
						<view class="name_value">
							<view class="name">降级</view>
							<view class="value">{{reportOverview.lowerQuantity || 0}}扎</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/common/right1.png" mode=""></image>
					</view>
				</view>
				<view 
					class="list"
					hover-class="custom_hover" 
					:hover-stay-time="200"
					@click="handleGoSalesReturnRecord">
					<view class="left">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_06.png" mode=""></image>
						</view>
						<view class="name_value">
							<view class="name">退货</view>
							<view class="value">{{reportOverview.returnQuantity || 0}}次</view>
						</view>
					</view>
					<view class="right">
						<image src="/static/common/right1.png" mode=""></image>
					</view>
				</view>
				<view class="list">
					<view class="left">
						<view class="icon">
							<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/statistics_07.png" mode=""></image>
						</view>
						<view class="name_value">
							<view class="name">未入位</view>
							<view class="value">{{reportOverview.notArrivedQuantity || 0}}次</view>
						</view>
					</view>
					<view class="right"></view>
				</view>
			</view>
		</view>
		<!-- 选择时间 -->
		<custom-select-time2 
			:show="isShowDatetimePicker" 
			:defaultDate="selectDateTime"
			@close="isShowDatetimePicker = false" 
			@confirm="handleSelectTime">
		</custom-select-time2>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	import reportApi from '@/api/report'
	import { parseTimeSelection, getTodayDateString } from '@/utils/dateUtils'

	const reportOverview = ref({})
	
	// 缺货记录
	const handleGoStockoutRecord = ()=>{
		uni.navigateTo({
			url:'/pages/stockoutRecord/stockoutRecord'
		})
	}
	// 降级记录
	const handleGoDemotionRecord = ()=>{
		uni.navigateTo({
			url:'/pages/demotionRecord/demotionRecord'
		})
	}
	// 退货记录
	const handleGoSalesReturnRecord = ()=>{
		uni.navigateTo({
			url:'/pages/salesReturnRecord/salesReturnRecord'
		})
	}
	
	// 选择时间
	const isShowDatetimePicker = ref(false);
	const selectDateTime = ref('');
	const handleSelectTime = (e)=>{
		selectDateTime.value = e;
		getReportOverview();
	};

	const getReportOverview = async () => {
		try{
			const { timeRange } = parseTimeSelection(selectDateTime.value)
			const params = {
				startTime: timeRange.startTime,
				endTime: timeRange.endTime,
			}
			const response = await reportApi.getReportOverview(params)
			reportOverview.value = response
		} catch (error) {
			console.warn('概览数据加载失败:', error);
			reportOverview.value = {
				noEnterNum: 0,
				lowerQuantity: 0,
				lackQuantity: 0,
			};
		}
		
	}

	onMounted(()=>{
		// 设置默认时间为今天
		selectDateTime.value = getTodayDateString();
		// 获取统计数据
		getReportOverview();
	})
	
	
</script>

<style lang="scss">
	.statistics{
		._wrap{
			padding: 20rpx;
			.bg{
				width: 100%;
				height: 283rpx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.title_time{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:30rpx 0 0;
				.title{
					font-weight: bold;
					color: #333333;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					&::before {
						content: '';
						width: 6rpx;
						height: 24rpx;
						border-radius: 74rpx;
						background: transparent;
						display: block;
						margin-right: 10rpx;
						background: url(/static/common/select_type_active.png);
						background-size:contain;
					}
				}
				.time{
					display: flex;
					align-items: center;
					.text{
						font-size: 24rpx;
						color: #AAAAAA;
					}
					.icon{
						width: 20rpx;
						height: 11rpx;
						padding-left: 10rpx;
						display: flex;
					}
				}
			}
			.list_wrap{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.list{
					background: #fff;
					width: 280rpx;
					height: 60rpx;
					border-radius: 20rpx;
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx;
					.left{
						display: flex;
						align-items: center;
						.icon{
							width: 48rpx;
							height: 48rpx;
						}
						.name_value{
							font-size: 24rpx;
							padding-left: 30rpx;
							.name{
								color: #333;
							}
							.value{
								color: #AAAAAA;
								padding-top: 10rpx;
							}
						}
					}
					.right{
						width: 20rpx;
						height: 20rpx;
						display: flex;
					}
				}
			}
		}
	}
</style>
